<template>
	<div class="container">
		<div class="main">
			<!-- 上面部分 -->
			<div class="timer">
				<!-- 天气板块 -->
				<div class="tianqi">
					<div class="tianqi-l"><img :src="tianqi_img" alt="">
						<div class="tmp">{{ data_tianqi.tem }}</div>
						<p>℃ <br>{{ data_tianqi.info }}(实时)</p>
					</div>
					<div class="tianqi-r">
						<p class="pcolor" :class="color_class"><span class="kongqizhishu">{{ data_tianqi.aqi }}</span> <span class="kongqizhiliang">{{air_quality}}</span></p>
						<p class="wendu">{{ data_tianqi.future_tem }}</p>
						<p class="zhongwentianqi">{{ data_tianqi.info }}</p>
						<p><span class="fengxiang">{{ data_tianqi.direct }}</span><span class="fengli">{{ data_tianqi.power }}</span></p>
					</div>

				</div>
				<!-- 电子时钟板块 -->
				<div class="shijian">
					    <p class="date">{{ date }}</p>
					    <p class="time">{{ time }}</p>
				</div>
			</div>
			<!-- 下面部分 -->
			<div class="mbody">
				<!-- 食谱 -->
				<a href="#/test"><div class="left"><p>智能菜谱</p><img src="../assets/images/shipu.png" ></div></a>
				<div class="center">
					<a href="#/jkfenlei"><div class="top"><img src="../assets/images/jiankang.png" ><p>营养健康</p></div></a>
					<div class="bottom">
						<a href="#/leader"><div class="kc"><img src="../assets/images/house.png" ><p>库存管理</p></div></a>
						<!-- 	<a href="#" alt=""><div class="L0">今</div></a>
							<a href="#" alt=""><div class="L1">日</div></a>
							<a href="#" alt=""><div class="L2">库</div></a>
							<a href="#" alt=""><div class="L3">存</div></a> -->
						<a href="#/today"><div class="kc td"><img src="../assets/images/today.png" ><p>当前库存</p></div></a>
					</div>
				</div>
				<div class="right">
					<a href="#/user"><div class="user"><img src="../assets/images/user.png" ><p>用户中心</p></div></a>
					<a href="#/menu"><div class="clock"><img src="../assets/images/shipu.png" ><p>传统菜谱</p></div></a>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
// 按需导入 API 接口
// import { getTianQiAPI } from '@/api/tianqiAPI'
import { getTianQiAPI } from '@/api/getWeather'

var week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
export default {
  data () {
    return {
      data_tianqi: {
		  aqi: '110',
		  city: '沭阳',
		  direct: '南风',
		  future_tem: '19-32℃',
		  info: '晴',
		  power: '2级',
		  tem: '30'
	  },
	  color_class: 'yellow',
	  air_quality: '良',
	  time: '',
	  date: ''
    }
  },
  computed: {
  	  tianqi_img () {
  		  var imageurl = './weather/天气-' + this.data_tianqi.info + '.png'
		  // console.log(imageurl)
		  return imageurl
  	  }
  },
  methods: {
    async initTianQi (cityid) {
      // console.log(1111)
      // 调用api 接口
      const res = await getTianQiAPI(cityid)
      if (res.data.message === 'OK') {
        var result = res.data.result
        console.log(result)
        // this.data_tianqi = res.data.result
        // console.log(this.data_tianqi)
        this.data_tianqi = {
          city: result.city,
          info: result.realtime.info,
          tem: result.realtime.temperature,
          aqi: result.realtime.aqi,
          direct: result.realtime.direct,
          power: result.realtime.power,
          future_tem: result.future[0].temperature
        }
        if (result.realtime.aqi <= 50) {
          this.air_quality = '优'
		    this.color_class = 'green'
        } else if (result.realtime.aqi > 50 && result.realtime.aqi <= 100) {
          this.air_quality = '良'
          this.color_class = 'yellow'
        } else if (result.realtime.aqi > 100 && result.realtime.aqi <= 150) {
          this.air_quality = '轻度污染'
          this.color_class = 'orange'
        } else if (result.realtime.aqi > 150 && result.realtime.aqi <= 200) {
          this.air_quality = '中度污染'
          this.color_class = 'red'
        } else if (result.realtime.aqi > 200 && result.realtime.aqi <= 300) {
          this.air_quality = '重度污染'
          this.color_class = 'purple'
        } else if (result.realtime.aqi > 300) {
          this.air_quality = '严重污染'
          this.color_class = 'darkred'
        }
        // console.log(this.data_tianqi)
      }
    },
    zeroPadding (num, digit) {
	  var zero = ''
	  for (var i = 0; i < digit; i++) {
	    zero += '0'
	  }
	  return (zero + num).slice(-digit)
    },
    updateTime () {
	  var cd = new Date()
	  this.time = this.zeroPadding(cd.getHours(), 2) + ':' + this.zeroPadding(cd.getMinutes(), 2) + ':' + this.zeroPadding(cd.getSeconds(), 2)
	  this.date = this.zeroPadding(cd.getFullYear(), 4) + '-' + this.zeroPadding(cd.getMonth() + 1, 2) + '-' + this.zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()]
    }

  },
  created () {
	  this.initTianQi('沭阳')
  },
  mounted () {
  	this.updateTime()
    setInterval(this.updateTime, 1000)
  }
}

</script>

<style scoped>
/* 全局导入公共样式 */
@import url("../assets/css/common.css");
	body{
		margin: 0;
	}
	.container {
		overflow: hidden;
		width: 10rem;
		height: 5.625rem;
		margin: 0 auto;
		background-color: #100C2A;
		/* background-image: url('../assets/images/background.jpg');
		background-size: 100% 100% */
	}

	.container .main {
		width: 7.5rem;
		margin: 0 auto;
		margin-top: 0.3125rem;
		/* background-color: pink; */
	}

	.main .timer {
		width: 100%;
		height: 1.5rem;
		color: #fff;
	}
	.timer .tianqi, .timer .shijian{
		float: left;
	}
	.timer .tianqi {
		width: 2.0625rem;
		height: 100%;
		/* background-color: #fff; */
	}

	.timer .tianqi .tianqi-l {
		float: left;
		width: 1.125rem;
	}

	.timer .tianqi .tianqi-l img {
		width: 1rem;
		height: 0.9rem;
	}

	.timer .tianqi .tianqi-l .tmp {
		float: left;
		width: 0.375rem;
		height: 0.375rem;
		margin-left: 0.125rem;
		font-size: 0.3125rem;
		line-height: 0.375rem;
		text-align: center;
		color: #67e0e3;
		-webkit-text-stroke: 2px white;
	}

	.timer .tianqi .tianqi-l p {
		float: left;
		margin-left: 0.0625rem;
		font-size: 0.1rem;
		color: #fb7293;
		-webkit-text-stroke: .2px gold;
	}

	.timer .tianqi .tianqi-r {
		width: 0.9375rem;
		float: right;
	}

	.timer .tianqi .tianqi-r .pcolor{
		text-align: center;
		line-height: 0.125rem;
		margin-top: 0.475rem;
		width: 0.6125rem;
		height: 0.125rem;
		border-radius: 0.03125rem;
		color: #a77eff;
		-webkit-text-stroke: .2px black;
	}
	.timer .tianqi .tianqi-r .wendu{
		color: #fb7293;
		-webkit-text-stroke: .2px gold;
	}
	.timer .tianqi .tianqi-r .zhongwentianqi{
		color: #fb7293;
		-webkit-text-stroke: .2px gold;
	}
	.timer .tianqi .tianqi-r p {
		font-size: 0.1rem;
		color: #8dc1a9;
		-webkit-text-stroke: .2px gold;
	}

	.timer .tianqi .tianqi-r .green span {
		/* margin-left: 0.03125rem; */
		font-size: 0.0875rem
	}

	.main .mbody {
		width: 100%;
		height: 3.4375rem;
		/* background-color: purple; */
	}

	.main .mbody #he-plugin-standard {
		width: 2rem;
		height: 2rem;
	}

	.mbody .left {
		float: left;
		height: 3.4375rem;
		width: 2.0625rem;
		background: #37a2da;
		border: solid white 0.03125rem;
		border-radius: 0.075rem;
		text-align: center;
	}
	.mbody .left p{
		font-size: 0.375rem;
		color: #FFFFFF;
		margin: 0.375rem auto;
	}
	.mbody .left img {
		width: 1.4125rem;
		height: 1.51875rem;
	}

	.mbody .center {
		float: left;
		height: 3.4375rem;
		width: 3.53125rem;
		margin-left: 0.1125rem;
	}

	.mbody .center .top {
		width: 3.53125rem;
		height: 1.6875rem;
		background: #9FE6B8;
		border: solid white 0.03125rem;
		border-radius: 0.075rem;
	}

	.mbody .center .top img {
		display: inline-block;
		width: 2.275rem;
		height: 1.59375rem;
		border-radius: 0.03125rem;
		vertical-align: middle;
	}
	.mbody .center .top p{
		margin: 0;
		display: inline-block;
		width: 0.8625rem;
		height: 1.05rem;
		font-size: 0.375rem;
		text-wrap: wrap;
		color: #ffffff;
		transform: translateY(25%);
		margin-left: 0.1875rem;
	}

	.mbody .center .bottom {
		margin-top: 0.0625rem;
		height: 1.6875rem;
		width: 3.53125rem;
	}

	.mbody .center .bottom .kc {
		width: 1.6875rem;
		height: 1.6875rem;
		float: left;
		background: #F49F42;
		border: solid white 0.03125rem;
		border-radius: 0.075rem;
		text-align: center;
	}
	.td{
		background:#FF9F7F !important;
		margin-left: 0.15625rem;
	}
    .mbody .center .bottom .kc img{
		width:1rem;
		height:1rem;
	}
	.mbody .center .bottom .kc p{
		font-size: 0.375rem;
		color: #FFFFFF;
		margin-top: 0.0625rem;
	}
	.mbody .center .bottom .setting {
		width: 1.6875rem;
		height: 1.6875rem;
		float: right;
	}

	.bottom .setting a div{
		float: left;
		width: 0.8125rem;
		height: 0.8125rem;
	}

	.bottom .setting a div:nth-child(2n+1) {
		margin-right: 0.03rem;
	}

	.bottom .setting a div:nth-child(-n+2) {
		margin-bottom: 0.0625rem;
	}
	.L0{
		background: #EEDD78;
		border: solid white 0.03125rem;
		border-radius: 0.075rem;
	}
	.L1{
		background: #FF9F7F;
		border: solid white 0.03125rem;
		border-radius: 0.075rem;
	}
	.L2{
		background: #DD6B66;
		border: solid white 0.03125rem;
		border-radius: 0.075rem;
	}
	.L3{
		background: #73A373;
		border: solid white 0.03125rem;
		border-radius: 0.075rem;
	}
	.bottom .setting a img {
		height: 100%;
		width: 100%;
	}

	.mbody .right {
		float: right;
		height: 3.4375rem;
		width: 1.6875rem;
	}

	.mbody .right div {
		width: 1.6875rem;
		height: 1.6875rem;
		background: #32C5E9;
		border: solid white 0.03125rem;
		border-radius: 0.075rem;
		text-align: center;
	}
	.mbody .right div img{
		margin-top: 0.03125rem;
		width: 1rem;
		height: 1rem;
	}
	.mbody .right div p{
		font-size: 0.375rem;
		color: #FFFFFF;
		margin-top: 0.0625rem;
	}

	.mbody .right .clock {
		margin-top: 0.0625rem;
		background: #E062AE;
	}
	.shijian {
	  /* font-family: 'Share Tech Mono', monospace; */
	  -webkit-text-stroke: 2px white;
	  color: #8378ea;
	  text-align: left;
	  text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
	  margin-top: 0.6025rem;
	  font-weight: 400;
	}
	.shijian .time {
	  letter-spacing: 0.05em;
	  font-size: 0.5rem;
	  /* padding: 5px 0; */
	  margin: 0 auto;
	}
	.shijian .date {
	  color: #8378ea;
	  -webkit-text-stroke: 0.5px white;
	  letter-spacing: 0.1em;
	  font-size: 0.15rem;
	  margin: 0 auto;
	}
</style>
